// 合同变更
<template>
    <div class="contractChange">
        <div class="title">变更记录</div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="recordTime" label="变更时间" width="300" align="center"/>
            <el-table-column prop="createName" label="操作人" width="300" align="center"/>
            <el-table-column prop="remarks" label="变更说明" align="center"/>
            <el-table-column  label="操作" align="center">
                <template slot-scope="scope">
                <el-button type="text" @click="viewHis(scope.row)">查看原合同</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="历史合同信息"
            :visible.sync="dialogVisible"
            width="80%"
             :close-on-click-modal="false">

            <div>

                <!--合同信息-->
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>合同预览</span>
                            </div>
                            <div class="text item">
                                <div class="pdf">
                                    <div @click="dialogContractVisible = true">
                                        <pdf :src="formData.contractUrl" :page="1"/>
                                    </div>
                                    <br>
                                    <span>{{formData.contractName}}</span>
                                    <!--弹出合同详细内容-->
                                    <el-dialog
                                        title="合同详情"
                                        :visible.sync="dialogContractVisible"
                                        fullscreen
                                        width="60%"
                                        :before-close="handleClose"
                                         :close-on-click-modal="false">
                                        <el-row>
                                            <pdf
                                                :src="formData.contractUrl"
                                                :page="pageNum"
                                                @num-pages="pageTotalNum=$event"
                                                @link-clicked="page = $event"
                                            />
                                        </el-row >
                                        <span slot="footer" class="dialog-footer" >
                <el-row style="text-align: center;">
                    <h3>
                    <span>{{pageNum}}/{{pageTotalNum}}</span>
                    </h3>
                </el-row>
                <el-row style="text-align: center;">
                     <el-button type="primary" @click.stop="prePage">上一张</el-button>
                    <el-button type="primary" @click="dialogContractVisible = false">关闭</el-button>
                    <el-button type="primary" @click.stop="nextPage">下一张</el-button>
                </el-row>
            </span>
                                    </el-dialog>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="18">
                        <el-row>
                            <el-card>
                                <div slot="header" class="clearfix">
                                    <span>承租方信息</span>
                                </div>
                                <div class="text item">
                                    <el-row>
                                        <el-form class="form-wrap" :model="propForm" size="small" ref="propForm">
                                            <el-form-item label="承租方名称:">
                                                <span>{{propForm!=null?propForm.clientLesseeName:""}}</span>
                                            </el-form-item>
                                            <el-form-item label="承租方类型:">
                                                <span>{{propForm.clientLesseeType|dict('lessee_type')}}</span>
                                            </el-form-item>
                                            <!-- 第一行第3列-->
                                            <el-form-item v-show="propForm !=null && propForm.clientLesseeType=='0'" label="证件类型:">
                                                <span>{{propForm.certificateType|dict('personage_certificate_type')}}</span>
                                            </el-form-item>
                                            <el-form-item v-show="propForm!=null && propForm.clientLesseeType!='0'" label="证件类型:">
                                                <span>{{propForm.certificateType|dict('commercial_certificate_type')}}</span>
                                            </el-form-item>
                                            <!-- 第一行第4列-->
                                            <el-form-item    label="证件号码:">
                                                <span>{{propForm!=null?propForm.certificateNum:""}}</span>
                                            </el-form-item>

                                            <!-- 第二行-->
                                            <!-- 如果不是 "个人"，则会将下面一行会显示出来-->
                                            <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0"  label="法人代表:">
                                                <span>{{propForm!=null?propForm.legalPerson:""}}</span>
                                            </el-form-item>
                                            <el-form-item  v-show="propForm!=null &&  propForm.clientLesseeType!=0"  label="身份证号码:">
                                                <span>{{propForm!=null?propForm.legalIdentityCard:""}}</span>
                                            </el-form-item>
                                            <el-form-item  v-show="propForm!=null && propForm.clientLesseeType!=0" label="手机号码:">
                                                <span>{{propForm!=null?propForm.phoneNum:""}}</span>
                                            </el-form-item>
                                            <el-form-item  v-show="propForm!=null && propForm.clientLesseeType!=0"   label="固定电话:">
                                                <span>{{propForm!=null?propForm.telephone:""}}</span>
                                            </el-form-item>
                                        </el-form>
                                    </el-row>
                                </div>
                            </el-card>
                        </el-row>
                        <el-row>
                            <el-card>
                                <div slot="header" class="clearfix">
                                    <span>合同信息</span>
                                </div>
                                <div class="text item">
                                    <el-row>
                                        <el-form :model="formData" class="form-wrap" size="small">
                                            <el-form-item label="签订方式" prop="signType">

                                                <span>{{formData.signType|dict('rent_signing_method')}}</span>
                                            </el-form-item>
                                            <el-form-item label="合同签订日期" prop="signDate">

                                                <span>{{formData.signDate}}</span>
                                            </el-form-item>
                                            <el-form-item label="合同开始日期" prop="startDate">

                                                <span>{{formData.startDate}}</span>
                                            </el-form-item>
                                            <el-form-item label="合同结束日期" prop="endDate">

                                                <span>{{formData.endDate}}</span>
                                            </el-form-item>
                                            <el-form-item label="起租日期" prop="rentStartDate">

                                                <span>{{formData.rentStartDate}}</span>
                                            </el-form-item>
                                            <el-form-item label="合同类型">
                                                <span>{{formData.type|dict('rent_contract_type')}}</span>
                                            </el-form-item>
                                            <el-form-item label="合同细类">

                                                <span>{{formData.subType|dict('rent_contract_sub_type')}}</span>
                                            </el-form-item>
                                            <el-form-item label="建筑面积" prop="buildingArea">
                                                <span>{{formData.buildingArea}}</span>
                                            </el-form-item>
                                            <el-form-item label="月租金" prop="rentAmount">
                                                <span>{{formData.rentAmount}}</span>
                                            </el-form-item>
                                            <el-form-item label="收费方式" prop="feeType">

                                                <span>{{formData.feeType|dict('rent_fee_type')}}</span>
                                            </el-form-item>
                                            <el-form-item  v-if="formData.feeType=='6'" label="自定义收费周期（月）" prop="feeTypeValue">
                                                <span>{{formData.feeTypeValue}}</span>
                                            </el-form-item>
                                            <el-form-item label="应收日" prop="feeDate">

                                                <span>{{formData.feeDate}}</span>
                                            </el-form-item>
                                            <el-form-item label="审批方式" prop="approveType">

                                                <span>{{formData.approveType|dict('rent_contract_approve_type')}}</span>
                                            </el-form-item>
                                            <el-form-item label="管理所" prop="administrativeOffice">

                                                <span>{{formData.administrativeOffice|dict('administrative_office')}}</span>
                                            </el-form-item>
                                            <el-form-item label="备注" prop="remarks">
                                                <span>{{formData.remarks}}</span>
                                            </el-form-item>
                                        </el-form>
                                    </el-row>
                                </div>
                            </el-card>
                        </el-row>
                        <el-row>
                            <el-card>
                                <div slot="header" class="clearfix">
                                    <span>物业信息</span>
                                </div>
                                <div class="text item">
                                    <el-row>
                                        <el-table
                                            :data="propertyInformation"
                                             stripe
                                            align="center"
                                            style="width: 100%">
                                            <el-table-column
                                                type="index"
                                                align="center"
                                                width="50">
                                            </el-table-column>
                                            <el-table-column
                                                label="物业名称"
                                                align="center"
                                                prop="propertyName"
                                                width="50">
                                            </el-table-column>
                                            <el-table-column
                                                label="建筑面积（㎡）"
                                                align="center"
                                                prop="buildingArea"
                                                width="100">
                                            </el-table-column>
                                            <el-table-column
                                                label="物业评估价（元/㎡/月）"
                                                align="center"
                                                prop="assessPrice"
                                                width="150">
                                            </el-table-column>
                                            <el-table-column
                                                prop="price"
                                                align="center"
                                                label="单价（元/㎡/月）"
                                                width="100">
                                            </el-table-column>
                                            <el-table-column
                                                prop="remarks"
                                                align="center"
                                                label="说明"
                                                width="100">
                                            </el-table-column>
                                        </el-table>
                                    </el-row>
                                </div>
                            </el-card>
                        </el-row>
                        <el-row>
                            <el-card>
                                <div slot="header" class="clearfix">
                                    <span>租金标准</span>
                                </div>
                                <div class="text item">
                                    <el-row>
                                        <el-table :data="rentFeeInformation"
                                                   stripe
                                                  style="width: 100%">
                                            <el-table-column
                                                prop="startDate"
                                                label="开始时间"
                                                width="100">
                                            </el-table-column>
                                            <el-table-column
                                                prop="endDate"
                                                label="结束时间"
                                                width="100">
                                            </el-table-column>
                                            <el-table-column
                                                prop="priceFinal"
                                                label="月租金"
                                                width="100">
                                            </el-table-column>
                                            <el-table-column
                                                prop="remarks"
                                                label="说明"
                                                width="100">
                                            </el-table-column>
                                        </el-table>
                                    </el-row>
                                </div>
                            </el-card>
                        </el-row>
                        <el-row>
                            <el-card>
                                <div slot="header" class="clearfix">
                                    <span>其他费用</span>
                                </div>
                                <div class="text item">
                                    <el-row>
                                        <el-table
                                            :data="contractFee"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="chargeProjectName"
                                                label="费用项目名称"
                                                width="180">
                                            </el-table-column>
                                            <el-table-column
                                                prop="feeStadard"
                                                label="收费标准"
                                                width="180">
                                            </el-table-column>
                                            <el-table-column
                                                prop="amount"
                                                label="金额"
                                                width="180">
                                            </el-table-column>
                                        </el-table>
                                    </el-row>
                                </div>
                            </el-card>
                        </el-row>
                    </el-col>
                </el-row>

            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">浏览完毕</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    import pdf from 'vue-pdf'
    import {getHisList,getHistoryContract} from '../../api/rent-contract.js'
    import {getObj as getClientManage} from '@/views/client-manage/api/clientlessee.js'
    export default {
        name: 'contractChange',
        components:{
            pdf,
        },
        data() {
            return {
                //承租方内容展示
                propForm: '',
                //合同详情
                formData:'',
                //合同预览
                pageNum: 1,
                category: 1,
                pageTotalNum: '',
                page: '',
                dialogContractVisible:false,
                dialogVisible: false,
                tableData: [],
                propertyInformation: [],
                rentFeeInformation: [],
                contractFee: [],
            }
        },

        mounted:function(){
          //this.loadHisList();
        },

        methods:{
            //合同预览
            //上一页
            prePage() {
                var p = this.pageNum
                p = p > 1 ? p - 1 : this.pageTotalNum
                this.pageNum = p
            },
            //下一页
            nextPage() {
                var p = this.pageNum
                p = p < this.pageTotalNum ? p + 1 : 1
                this.pageNum = p
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //加载列表
            loadHisList(contractId){
                //alert("11");
                let rentContractId=contractId;//this.$route.query.id;
                //alert(rentContractId);
                getHisList(rentContractId, this.category)
                    .then(response=> {
                            //alert(JSON.parse(response.data));
                            if (response.data.code == 0) {
                                this.tableData = response.data.data;
                            }
                            else {
                                this.$alert("加载变更记录服务端服务错误" + response.code);
                            }
                        }
                    )

            },

            async viewHis(row){
                this.dialogVisible=true
                const response= await getHistoryContract(row.rentContractHisId, this.category);
                let formData=response.data.data;
                this.formData=formData;
                this.rentFeeInformation=formData.rentContractDetailHis
                this.propertyInformation = formData.rentContractRoomHis
                this.contractFee = formData.rentContractProfeeHis
                //获得承租方信息
                const propForm = await getClientManage(this.formData.customerId, this.category)
                this.propForm = propForm.data.data;
                console.log(this.propForm)
                console.log(this.formData)
            }
        }
    }
</script>

<style lang="scss" scoped>

    @include formWrap();
.contractChange{
    .title{
        font-size: 16px;
        font-weight: bold;
        margin:10px 0 20px;
        color: #333;
    }
    /deep/ .el-table{
        .el-table__header{
            border-color: #dee2e6;
        }
        thead th{
            background-color: #FAFAFA;
            color: #333;
        }
        td{
            padding: 10px 0;
        }
    }
}
</style>
